import React, { useState, useEffect } from "react";
import { Form, Input, Button, Row, Col, message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { getAuthList, searchAuth } from "../../../api/auth/index";
import { auths } from "../../../api/auth/data.js";
import PubSub from 'pubsub-js';
const SearchBar = () => {
  const [searchForm] = Form.useForm();
  const onFinish = (values) => {
    PubSub.publish('authSearch', values);
    
    console.log(values);
  };

  const onReset = () => {
    searchForm.resetFields();
    PubSub.publish('reset', true);
  };

  const showDrawer = () => {
    PubSub.publish('showCreate', true);
  };

  

  return (
    <Form
      form={searchForm}
      name="basic"
      autoComplete="off"
      onFinish={onFinish}
      initialValues={{ name: "", id: "" }}
    >
      <Row gutter={15}>
        <Col span={8}>
          <Form.Item label="ID" name="id">
            <Input placeholder="请输入ID" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="名称" name="name">
            <Input placeholder="请输入名称" />
          </Form.Item>
        </Col>
        <Col span={4} offset={4}>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              style={{ borderRadius: "4px", marginRight: "10px" }}
            >
              查询
            </Button>
            <Button onClick={onReset} style={{ borderRadius: "4px" }}>
              重置
            </Button>
          </Form.Item>
        </Col>
        <Col span={4}>
          <Button
            onClick={showDrawer}
            type="primary"
            style={{ borderRadius: "4px" }}
          >
            <PlusOutlined />
            新建
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default SearchBar;
